<template>
  <div>
    <div class="head">
      <div class="pane">
        <div class="lir">唱片收藏架<br />表达音乐品味</div>
        <span class="liri">布置唱片架></span>
      </div>
      <div class="pane">
        <div class="lir">展示动态<br />让别人了解你</div>
        <span class="liri">使用相册></span>
      </div>
      <div class="pane">
        <div class="lir">大声说出你的<br />愿望</div>
        <span class="liri">写愿望清单></span>
      </div>
    </div>
    <div class="BasicInfo">
      <div class="myinfomation">
        <span class="infom">基本信息</span>
        <br />
        村龄：{{ year }}年({{ time }}注册)
        <br />
        <br />
        性别：{{ sexy }}
        <br />
        <br />
        地区：湖南 长沙
      </div>
      <div class="lookall">
        查看全部 >
      </div>
    </div>
    <div class="BasicInfo">
      <span class="infom">音乐品味</span>
      <div class="bar">
        <van-icon name="chart-trending-o" class="ico" size="55" />
        <!-- <van-icon name="bar-chart-o" color="#ec0202" /> -->
        <div class="bor-in">
          <span class="listen">听歌排行</span><br />
          累计听歌200首
        </div>
      </div>
      <div class="bar">
        <van-icon name="like" class="ico" size="55" />
        <div class="bor-in">
          <span class="listen">我喜欢的音乐</span><br />
          10首，播放22次
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getages } from '@/api/myprofile'
// var moment = require('moment')
export default {
  name: 'HomePage',
  props: {
    data: {
      type: [Array, Object],
      required: true
    }
  },
  data () {
    return {
      sexy: this.a(),
      year: '',
      time: ''
    }
  },
  created () {
    this.getages()
  },
  mounted () {},
  methods: {
    a () {
      if (this.data.gender > 0) {
        return '男'
      } else {
        return '女'
      }
    },
    async getages () {
      const aa = await getages(this.$store.state.cookie)
      // console.log(111)
      // console.log(aa.profile)
      this.contryage = aa.profile
      // console.log(this.contryage.createTime)
      const time = moment(this.contryage.createTime).format('YYYY-MM-DD')
      console.log(time)
      this.time = time
      this.year = moment(time, 'YYYYMMDD')
        .fromNow(true)
        .slice(0, 2)
    }
  }
}
</script>

<style scoped lang="less">
.head {
  display: flex;
  padding: 25px;
  .pane {
    flex-direction: column;
    flex: 1;
    height: 260px;
    margin: 12px;
    padding: 12px;
    font-size: 30px;
    border-radius: 18px;
    background: #ffffff;
    .lir {
      height: 220px;
      color: rgb(100, 100, 100);
    }
    .liri {
      color: rgb(252, 78, 71);
    }
  }
}
.BasicInfo {
  background: #fff;
  height: 320px;
  margin: 30px;
  padding: 20px;
  font-size: 31px;
  border-radius: 18px;
  color: #3a3a3a;
  .infom {
    font-size: 38px;
    color: #090707;
  }
  .lookall {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    padding-top: 12px;
    border-top: 0.5px solid #e4e4e4;
    color: rgb(100, 100, 100);
  }
  .bar {
    display: flex;
    height: 120px;
    // background: pink;
    margin-top: 20px;
    .ico {
      background: #ec0202;
      color: #fff;
      border-radius: 15px;
      padding: 8px;
    }
    .bor-in {
      padding: 12px;
      font-size: 28px;
      color: rgb(100, 100, 100);
      .listen {
        font-size: 38px;
        color: #090707;
        margin-bottom: 7px;
      }
    }
  }
}
.songlist {
  background: #ffffff;
  height: 180px;
  margin: 30px;
  border-radius: 18px;
}
</style>
